.home{
    &::after{
        content: '';
        display: block;
        height: 50px;
    }
    &::before{
        content: '';
        display: block;
        height: 80px;
    }
    padding: 1vh 3vw;
    >.home_header{
        position: fixed;
        top: 0;
        left: 0;
        background-color:  #ffffff;
        width: 94vw;
        padding: 1vh 3vw;
        z-index: 10;
        .mint-header {
            color: #000;
            background-color: transparent;
            font-size: 4vh;
            font-weight: 700;
            border-bottom: 1px solid #fafafa;
            margin-left: -1vw;
        }
    }
    ::v-deep .mint-cell{
        border-radius: 8px;
        border: 1px solid #000;
        min-height:5vh;
    }
    .mint-field-other{
        img{
            width: 2rem;
        }
    }
    .home_imgs{
        width: 94vw;
        margin: 2vh auto;
        overflow: hidden;
        border-radius: 4vw;
        img{
            width: 100%;
            display: block;
        }
    }
    .home_title{
        display: flex;
        margin: 3vh 0;
        justify-content: space-between;
        div:nth-child(1){
            font-size: 1.3rem;
            font-weight: 600;
            letter-spacing: 0.1rem;
        }
        div:nth-child(2){
            color: #3bbdb6;
            &::after{
                content: '';
                width: 7px;
                height: 7px;
                display: inline-block;
                border-top: 2px solid #46D5CF;
                border-right: 2px solid #46D5CF;
                transform: rotate(45deg);
                margin-left: 1vw;
            }
        }
    }
    .home_office{
        width: 100%;
        height: 76vw;
        ul{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            align-content: space-evenly;
            li{
                width: 23%;
                height: 24vw;
                background-color:#F1FEFF;
                border-radius: 2vw;
                box-sizing: border-box;
                padding: 1vh 1.5vw;
                position: relative;
                span{
                    display: block;
                    &:nth-child(1){
                        font-weight: 600;
                        font-size: 2vw;
                        margin: 0.8vh 0;
                    }
                    &:nth-child(2){
                        font-size: 1vw;
                        color: rgb(90, 90, 90);
                    }
                }
                >div{
                    width: 10vw;
                    position: absolute;
                    right: 0vw;
                    bottom: 0vw;
                    img{
                        width: 100%;
                        display: block;
                    }
                }
            }
        }
    }
    .home_video{
        $height:18vh;
        height: $height;
        overflow: auto;
        &::-webkit-scrollbar{
            display: none;
        }
        >ul{
            // width: 50vw * 3; js实现
            height: $height;
            >li{
                float: left;
                width: 48vw;
                margin-right: 2vw;
                height: $height;
                border-radius: 2vw;
                >div{
                    border-radius: 2vw;
                    position: relative;
                    &::before{
                        content: '';
                        width: 48vw;
                        height: 24vw;
                        border-radius: 2vw;
                        position: absolute;
                        top: 0;
                        display: block;
                        background-color: rgba($color: #000000, $alpha: 0.4);
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 6vh;
                        height: 6vh;
                        display: block;
                        background-image: url(/public/image/home/stare.png);
                        background-size: 100%;
                        background-repeat: no-repeat;
                    }
                    >img{
                        width: 48vw;
                        height: 24vw;
                        border-radius: 2vw;
                        display: block;
                    }
                }
                >span{
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display: block;
                    padding: 0 1vw;
                }
            }
        }
    }
    .information{
        text-align: center;
        margin: 1vw 0;
        color: rgb(75, 75, 75);
    }
}
